import React from 'react'
import { List, Badge, Avatar } from 'antd-mobile'
import BottomNav from '../../components/BottomNav'
import styles from './index.module.css'

const Message = () => {
  const messageList = [
    {
      id: 1,
      type: 'system',
      title: '系统通知',
      content: '智慧医院平台即将上线，敬请期待！',
      time: '2024-01-15 10:30',
      unread: true
    },
    {
      id: 2,
      type: 'appointment',
      title: '预约提醒',
      content: '您预约的专家门诊将在明天上午9点开始',
      time: '2024-01-14 16:20',
      unread: false
    },
    {
      id: 3,
      type: 'report',
      title: '检查报告',
      content: '您的体检报告已生成，请及时查看',
      time: '2024-01-13 14:15',
      unread: true
    },
    {
      id: 4,
      type: 'payment',
      title: '缴费通知',
      content: '门诊费用已生成，请及时完成缴费',
      time: '2024-01-12 11:45',
      unread: false
    }
  ]

  const getIcon = (type) => {
    switch (type) {
      case 'system':
        return <span className={styles.systemIcon}>🔔</span>
      case 'appointment':
        return <span className={styles.appointmentIcon}>📅</span>
      case 'report':
        return <span className={styles.reportIcon}>📋</span>
      case 'payment':
        return <span className={styles.paymentIcon}>💰</span>
      default:
        return <span>💬</span>
    }
  }

  return (
    <div className={styles.messagePage}>
      <div className={styles.header}>
        <h2>消息中心</h2>
        <span className={styles.messageCount}>共 {messageList.filter(item => item.unread).length} 条未读</span>
      </div>
      
      <div className={styles.messageList}>
        {messageList.map(item => (
          <div key={item.id} className={`${styles.messageItem} ${item.unread ? styles.unread : ''}`}>
            <div className={styles.messageIcon}>
              {getIcon(item.type)}
            </div>
            <div className={styles.messageContent}>
              <div className={styles.messageHeader}>
                <span className={styles.messageTitle}>{item.title}</span>
                <span className={styles.messageTime}>{item.time}</span>
              </div>
              <div className={styles.messageText}>{item.content}</div>
            </div>
            {item.unread && <Badge content="新" className={styles.unreadBadge} />}
          </div>
        ))}
      </div>

      {/* 底部导航 */}
      <BottomNav />
    </div>
  )
}

export default Message
